<template>
  <div class="section section-one">
    <div class="title">
      <span>航标失常恢复时长</span>
    </div>
    <div class="content">
      <div class="sub-title">
        <span class="self-icon" v-show="!outer" @click="backChart">
          <el-icon :size="'large'" :color="'#ffffff'">
            <Back />
          </el-icon>
        </span>
      </div>
      <div class="main-chart-ref" ref="MainChartRef">

      </div>
    </div>
    <!-- <div class="divider"></div> -->
  </div>
</template>
<script>
let ChartIns = null;
import Api from '@/api'
export default {
  name: "SectionTwo",
  components: {},
  props: {},
  data() {
    return {
      outer: true,
      countOfShipInSocial: '---',
      color: ['#f0c725', "#4d88ff", "#fecc37", "#3ae6ff", "#fccc30"],
      // 在册数据
      beRegisteredData: [{ name: "宜宾", value: 25 }, { name: "重庆", value: 12 }, { name: "泸州", value: 15 }, { name: "涪陵", value: 8 }, { name: "万州", value: 14 }, { name: "宜昌", value: 23 }, { name: "荆州", value: 20 }, { name: "岳阳", value: 13 }, { name: "武汉", value: 25 }, { name: "九江", value: 19 }, { name: "芜湖", value: 18 }, { name: "南京", value: 16 }, { name: "镇江", value: 25 }, { name: "上海", value: 27 }],
      xAxisName: ['7.30', '7.31', '8.01', '8.02', '8.03', '8.04', '8.05', '8.06', '8.07'],
      seriesData: [1.3, 1.5, 0.8, 1.1, 1.4, 1.5, 0.7, 1.0, 0.5]
    };
  },
  computed: {
    subTitle() {
      return this.outer ? '工作船统计' : '工作船总数'
    }
  },
  mounted() {
    this.initChart();
    this.getCountOfShipInSocial();
  },
  unmounted() {
    if (ChartIns) {
      ChartIns.dispose();
    }
  },
  methods: {
    toRGB(color, opacity) {
      if (!/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/.test(color)) return;
      const chars = color.split("").splice(1);
      const r = `0x${chars[0]}${chars[1]}`;
      const g = `0x${chars[2]}${chars[3]}`;
      const b = `0x${chars[4]}${chars[5]}`;
      return `rgba(${parseInt(r)},${parseInt(g)},${parseInt(b)},${typeof opacity === "number" ? opacity : "1"
        })`;
    },
    initChart() {
      const that = this;
      const chartDom = that.$refs.MainChartRef;
      ChartIns = echarts.init(chartDom);
      that.renderChart({
        xAxisName: that.xAxisName,
        seriesData: that.seriesData,
        datazoom: false,
      })
    },
    renderChart({ xAxisName, seriesData, datazoom }) {
      const that = this;
      const option = {
        color: that.color,
        tooltip: {
          trigger: "axis",
          textStyle: {
            align: "left"
          },
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          align: "right",
          right: 0,
          itemHeight: 8,
          itemWidth: 20,
          show: false,
          textStyle: {
            color: "#fff"
          }
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          top: "25%",
          containLabel: true
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          x: 'right',
          y: 'center'
        },
        yAxis: {
          type: "value",
          name: '小时',
          nameTextStyle: {
            color: "#ffffff"
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(133,194,255,.5)"
            }
          },
          boundaryGap: ["0", "40%"],
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(58,112,197,.12)"
            }
          },
          splitNumber: 2,
          axisLabel: {
            color: "#ffffff"
          },
          splitArea: {
            show: false,
            areaStyle: {
              color: "rgba(58,112,197,.1)"
            }
          }
        },
        xAxis: {
          type: "category",
          data: xAxisName,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(133,194,255,.5)"
            }
          },
          axisLabel: {
            color: "#ffffff",
            interval: 0,
            width: 80,
            overflow: "truncate",
            ellipsis: "..."
          }
        },
        series: [{
          type: 'line',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(240,199,37,0.5)'
            }, {
              offset: 1,
              color: 'rgba(240,199,37,0.01)'
            }])
          },
          label: {
            show: true,
            position: "top",
            borderColor: "transparent",
            borderWidth: 0,
            fontSize: 16,
            color: "#fff",
            shadowColor: "transparent",
            fontFamily: "YouSheBiaoTiHei"
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              { offset: 0, color: that.color[0] },
              { offset: 0.985, color: that.toRGB(that.color[0], 0.1) },
              { offset: 0.985, color: that.toRGB(that.color[0], 1) },
              { offset: 1, color: that.toRGB(that.color[0], 1) }
            ])
          },
          data: seriesData
        }],
        dataZoom: [{
          type: "slider",
          show: datazoom,
          height: 10,
          start: datazoom ? 45 : 0,//位置
          end: datazoom ? 75 : 100,
          moveHandleSize: 5,
          textStyle: { color: "#fff" }
        }]
      }
      option && ChartIns.setOption(option, true);
    },
    backChart() {
      this.outer = true;
      ChartIns.clear();
    },
    // 获取社会船
    getCountOfShipInSocial() {
      Api.getCountOfShipInSocial().then(res => {
        if (res.data && res.data.data) {
          if (res.data.data[0]) {
            this.countOfShipInSocial = res.data.data[0].count || '---'
          }
        }
      })
    }
  }
};
</script>
<style lang="less" scoped>
.section-one {
  padding-top: 40px;

  &>.title {
    background-image: url(@/components/SupermapCard/images/title-main-header-v2.png);
    background-repeat: no-repeat;
    padding: 0 10px;
    font-family: 'YouSheBiaoTiHei', Arial, Helvetica, sans-serif;
    font-size: 17px;
    color: #fff;
  }

  &>.divider {
    border-top: 1px dashed rgba(255, 255, 255, 0.3);
    margin: 20px 10px;
  }
}

.content {
  &>.count {
    padding-left: 10px;
    color: #fff;
    font-weight: bolder;
    height: 32px;
    line-height: 32px;

    &>.number {
      padding-left: 20px;
      font-size: 20px;
      font-family: 'YouSheBiaoTiHei', Arial, Helvetica, sans-serif;
      color: #fecc37;
    }
  }
}

.main-chart-ref {
  height: 150px;
}

.sub-title {
  line-height: 1.8;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;

  &>.title {
    color: #fff;
    font-weight: bolder;
  }

  &>.self-icon {
    cursor: pointer;
  }
}
</style>